<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul></ul>
    <script>

        //操作一次dom 1ms不到
        let vitualDom = () => {
            console.time(1)
            let ul = document.querySelector('ul');
            let str = '';
            for(let i=0;i<1000;i++){
                str += `<li>${i}</li>`;
            }
            ul.innerHTML = str;
            console.timeEnd(1)
        }

        //循环操作dom 300ms
        let dom = () => {
            console.time(1)
            let ul = document.querySelector('ul');

            for(let i=0;i<1000;i++){
                ul.innerHTML += `<li>${i}</li>`;
            }
            console.timeEnd(1)
        }

        vitualDom();
        dom();


    </script>
</body>
</html>